<template>
  <div class="container">
    <BothInputTemplate
      v-model:leftStr="originStr"
      v-model:rightStr="confuseStr"
      :leftAttrs="{
        placeholder: '输入需要混淆的JavaScript代码'
      }"
    >
      <template #menu>
        <div class="menu flex-column-center">
          <el-button type="primary" size="small" @click="onConfuseStr">
            混淆
            <i class="iconfont icon-jiami1"></i>
          </el-button>

          <el-button type="success" size="small" :disabled="!confuseStr" @click="useCopy(confuseStr)">
            复制结果
            <i class="iconfont icon-fuzhi"></i>
          </el-button>
        </div>
      </template>
    </BothInputTemplate>
  </div>
</template>

<script lang="ts" setup>
// https://github.com/javascript-obfuscator/javascript-obfuscator

import { ref, reactive } from "vue";
import JavaScriptObfuscator from "javascript-obfuscator";
import useCopy from "@/hook/useCopy";

const originStr = ref(`alert("hello world");`);
const confuseStr = ref("");

const onConfuseStr = () => {
  const obfuscationResult = JavaScriptObfuscator.obfuscate(originStr.value, {
    compact: false,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 1,
    numbersToExpressions: true,
    simplify: true,
    stringArrayShuffle: true,
    splitStrings: true,
    stringArrayThreshold: 1,
    sourceMap: true
  });
  const obfuscatedCode = obfuscationResult.getObfuscatedCode();
  if (originStr.value !== obfuscatedCode) {
    confuseStr.value = obfuscatedCode;
  }
};
</script>

<style lang="scss" scoped>
.container {
  :deep(.wrap) {
    .left > .el-textarea > .el-textarea__inner,
    .right > .el-textarea > .el-textarea__inner {
      height: calc(100vh - 150px);
    }
  }

  .menu {
    :deep(.el-button) {
      width: 70%;
      margin: 6px 0;
      i {
        margin-left: 6px;
      }
    }
  }
}
</style>
